<template>
	<Modal
	    v-model="modal"
	    :title="modalTitle" @on-visible-change='modalChange'>
	    <Form ref="formValidate" :model="editData" :rules="ruleValidate" :label-width="100">
	        <FormItem label="用户名" prop="userName">
	            <Input v-model="editData.userName" placeholder="输入用户名"></Input>
	        </FormItem>
	        <FormItem label="密码"  prop="userPwd"  v-if="isShowPwd">
	            <Input v-model="editData.userPwd" placeholder="输入密码" type="password"/>
				<span style="color: #999999;">6-20位字符，可由英文、数字及标点符号组成。</span>
	        </FormItem>
	        <FormItem label="手机号" prop="tel">
	             <Input v-model="editData.tel" placeholder="请输入手机号" />
	        </FormItem>
			 <FormItem label='状态' prop='isOpen'>
			    <Radio-group v-model="editData.isOpen" >
			       <Radio :label="0">开启</Radio>
			       <Radio :label="1">关闭</Radio>
			   </Radio-group>
			</FormItem>
	    </Form>
	    <div slot="footer">
	        <Button @click="cancel">取消</Button>
	        <Button type="primary" @click="submit" :loading="loadingBtn">
	            <span v-if="!loadingBtn">确定</span>
	            <span v-else>请稍候...</span>
	        </Button>
	    </div>
	</Modal>
</template>

<script>
export default {
    components:{
    },
    props:{
        type:String
    },
    data(){
		//手机号的验证
		const validatePhone = (rule, value, callback) => {
		 if (!value) {
                return callback(new Error('手机号不能为空'));
            } else if (!/^1[34578]\d{9}$/.test(value)) {
                callback('手机号格式不正确');
            } else {
                callback();
            } 
		};
		//密码的验证
		const validatePwd = (rule, value, callback) => {
			var reg = /^([a-z0-9\.\@\!\#\$\%\^\&\*\(\)]){6,20}$/i;
			if (value) {
				if (!reg.test(value)) {
					callback('密码格式不正确');
				} else {
					callback();
				}
			} else {
				callback();
			}
		};
		//账号重复的验证
		const use = (rule, value, callback) => {
			if(this.partsId!=0){
					this.$http.post('/partslog/check/update/name', {
					userName: value,
					partsId:this.partsId
				}).then(res => {
					if (res.status == 200) {
						if (res.data.code == 200) {
							if (res.data.data != 0) {
								callback('账号已存在');
							} else {
								callback();
							}
						}
				
					}
				
				})
			}else{
				this.$http.post('/partslog/check/name', {
					userName: value
				}).then(res => {
					if (res.status == 200) {
						if (res.data.code == 200) {
							if(res.data.data!=null){
								callback('账号已存在');
							}else{
								callback();
							}
						}
				
					}
				
				})
			}
			
		};
        return {
            modal:false,
            modalTitle:'',
            editData:{
                userNmae:'',
                userPwd:'',
                tel:'',
				isOpen:0
            },
            partsId:0,
            isEdit:false,
            ruleValidate:{
                tel:{validator: validatePhone,trigger: 'blur'},
                userPwd:[{required:true,message:'请输入密码'},{validator: validatePwd,trigger: 'blur'}],
				userName: [{
						required: true,
						message: '请输入账号'
					},{
						validator: use
					}]
            },
            loadingBtn:false,
			isShowPwd:false
        }
    },
    methods:{
        
        show(res){
            this.$nextTick(()=>{
                this.modal = true
                switch (this.type) {
                    case 'add' :
                    this.isEdit = false
					this.isShowPwd = true
                    this.modalTitle = '新增'
                    break
                    case 'edit':
                    this.isEdit = true
					this.isShowPwd = false
                    this.partsId = res.row.partsId
						this.editData={
					    partsId:res.row.partsId,
					    userName:res.row.userName,
						userPwd:res.row.userPwd,
					    tel:res.row.tel,
						isOpen:res.row.isOpen
					}
                    this.modalTitle= '编辑'
                    break
                }
            })
            
        },
        
        //取消
        cancel(){
				this.modal = false;
				this.partsId =0
        },
       
        //提交
        submit(){
            this.$refs['formValidate'].validate((valid) => {
                if(valid){
					let factoryId = sessionStorage.getItem("factoryId");
                    let data = {
                        userName:this.editData.userName,
                        userPwd:this.editData.userPwd,
                        tel:this.editData.tel,
						isOpen:this.editData.isOpen,
						factoryId:factoryId
                    }
                    let url = '/partslog/save'
                    if(this.isEdit){
                        data.partsId = this.partsId
						data.userPwd=''
                    }
                    this.$http.post(url,data).then(res=>{
                        if(res.status==200){
							if(res.data.code==200){
								 this.$Message.success('操作成功')
								this.modal = false
								this.$emit('table')
							}
                           
                        }
                    })
                }
                
            })
            
        },
        modalChange(state){
            if(state){

            }else{
                this.$refs.formValidate.resetFields()
					this.partsId =0
            }
        }
    }
}
</script>
<style scoped>
.uploadSuccess{
    width: 200px;
    height: 100px;
}
</style>
